import { FC, useState, ChangeEvent, KeyboardEvent } from 'react';
import { Input } from 'antd';
import { useDispatch } from 'umi';

const Form: FC = () => {
  const [textValue, set_textValue] = useState<string>('');
  const dispatch = useDispatch();

  const handleChange = (e: ChangeEvent<HTMLInputElement>): void => {
    set_textValue(e.target.value);
  };

  const handleKeyUp = (e: KeyboardEvent): void => {
    if (e.key === 'Enter' && textValue) {
      dispatch({
        type: 'todolist/add',
        payload: textValue,
      });
    }
  };

  return (
    <>
      <Input value={textValue} onChange={handleChange} onKeyUp={handleKeyUp} />
    </>
  );
};

export default Form;
